<template>
	<view class="user_address_index">
		<uni-swipe-action>
			<uni-swipe-action-item :right-options="options"  @click="onClick(v.id)" v-for="(v,k) in list" :key="k">
				<view class="list_item">
					<view class="wrapper">
						<view class="address-box">
							<text class="tag" v-if="v.is_default==1">默认</text>
							<text class="address">{{v.area_info+' '+v.address}}</text>
						</view>
						<view class="u-box">
							<text class="name">{{v.receive_name}}</text>
							<text class="mobile">{{v.receive_tel}}</text>
						</view>
					</view>
					<uni-icons class="edit" type="compose" size="22" @click="addAddress('edit', v.id)"></uni-icons>
					<!-- <text class="qwfont iconbianji" @click.stop="addAddress('edit', item.id)"></text> -->
				</view>
			</uni-swipe-action-item>
			
		</uni-swipe-action>
		
		<button class="add-btn" @click="addAddress('add')">新增地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#ff0000'
						}
					}
				],
				list:[],
			};
		},
		onLoad() {
			this.get_list()
			uni.$on('address_edit',()=>{
				console.log('address_edit')
				this.get_list()
			})
		},
		methods:{
			onClick(e){
				let obj = {...this.$api.addresses};
				obj.url = obj.url+'/'+e
				obj.method = 'delete'
				this.$http(obj).then(res=>{
					console.log(123)
					// this.$toast(res.msg);
					this.get_list()
				})
			},
			get_list(){
				this.$http(this.$api.addresses).then(res=>{
					this.list = res.data;
					this.$forceUpdate()
				})
			},
			addAddress(e,id=0){
				if(e=='add'){
					this.$nav('/pages/user/address/form?id='+id)
				}else{
					this.$nav('/pages/user/address/form?id='+id)
				}
			},
		
		}
	}
</script>

<style lang="scss">
.user_address_index{
	background: #fff;
	margin:1px 0;
	.list_item{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
		width: 100%;
		border-bottom: 1px solid #efefef;
		.wrapper{
			display: flex;
			flex-direction: column;
			flex: 1;
			.u-box{
				color:#999;
				font-size: $uni-font-size-base;
				margin-top: 20rpx;
				.name{margin-right: 20rpx;}
			}
		}
		.edit{
			display: flex;
			align-items: center;
			height: 80upx;
			font-size: 40upx;
			padding-left: 30upx;
		}
		.address-box{
			display: flex;
			align-items: center;
			.tag{
				font-size: 24upx;
				color: $uni-color-error;
				margin-right: 20upx;
				background: #fffafb;
				border: 1px solid $uni-color-error;
				border-radius: 5upx;
				padding: 4upx 10upx;
				min-width: 48rpx;
				line-height: 1;
			}
			.address{
				font-size: 30upx;
			}
	
		}
	}
	.add-btn{
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: #ea1f22;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 40, 43, 0.4);		
	}
}
</style>
